<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>合并表格</title>
    <style type="text/css">
      table {
        text-align: center;
      }
      table thead tr {
        border-right: 0;
      }
      table tbody tr {
        border-bottom: 0;
        border-right: 0;
      }
      #tabel_container {
        width: 1000px;
        height: 600px;
        margin: 100px auto;
      }
      .titleColor {
        color: #1d64e3;
        font-weight: 700;
      }
      .theadColor {
        background-color: #e1eafb;
      }
    </style>
    <script src="jQ-3.6.0.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id="tabelContent"></div>
    <script type="text/javascript">
      $(function() {
        let tableData = {
          id: 'tabelContent',
          title: '2021年用水量分析',
          data: {
            thead: [
              [{
                  name: '市县名称',
                  style: ''
                },
                {
                  name: '用水量',
                  style: ''
                },
              ],
              [{
                  name: '1月',
                  style: ''
                },

                {
                  name: '2月',
                  style: ''
                },

                {
                  name: '3月',
                  style: ''
                },
                {
                  name: '4月',
                  style: ''
                },
                {
                  name: '5月',
                  style: ''
                },
                {
                  name: '6月',
                  style: ''
                },
                {
                  name: '7月',
                  style: ''
                },
                {
                  name: '8月',
                  style: ''
                },
                {
                  name: '9月',
                  style: ''
                },
                {
                  name: '10月',
                  style: ''
                },
                {
                  name: '11月',
                  style: ''
                },
                {
                  name: '12月',
                  style: ''
                }
              ],
            ],
            tbody: [
              [{
                  name: '太原市',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                }
              ],
              [{
                  name: '小店区',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                }
              ],
              [{
                  name: '迎泽区',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                }
              ],
              [{
                  name: '杏花岭区',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                }
              ],
              [{
                  name: '尖草坪区',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                }
              ],
              [{
                  name: '万柏林区',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                }
              ],
              [{
                  name: '晋源区',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                }
              ],
              [{
                  name: '清徐县',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                }
              ],
              [{
                  name: '阳曲县',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                }
              ],
              [{
                  name: '娄烦县',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                }
              ],
              [{
                  name: '古交市',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                },
                {
                  name: '13756.12',
                  style: ''
                }
              ]
            ]
          }
        }
        tableMerge(tableData)

        function tableMerge(data) {
          console.log(data)
          let renderDom = $("#" + data.id)

          // 渲染合并头部
          let MergeHead = ""
          data.data.thead[0].forEach((item) => {
            if (item.name === "市县名称") {
              MergeHead += `<th rowspan="2">${item.name}</th>`
            } else {
              MergeHead += `<th colspan="12">${item.name}</th>`
            }

          })
          // 渲染普通头部
          let OrdinaryHead = ""
          data.data.thead[1].forEach((item) => {
            OrdinaryHead += `<th>${item.name}</th>`
          })
          // 渲染tbody
          let tbodyTrHtml = ""
          data.data.tbody.forEach((trItem) => {
            let tbodyTdHtml = ""
            trItem.map((tdItem) => {
               tbodyTdHtml += `<td>${tdItem.name}</td>`
            })
            tbodyTrHtml += `<tr>${tbodyTdHtml}</tr>`
          })
          
          // 最终渲染表格
          let tableHtml =
            `
            <table border="1" cellspacing="0" cellpadding="0">
              <caption class="titleColor">${data.title}</caption>
              <thead class="theadColor">
                    <tr>
                      ${MergeHead}
                    </tr>
                    <tr>
                      ${OrdinaryHead}
                    </tr>
               </thead>
               <tbody>
                  ${tbodyTrHtml}
               </tbody>
            </table>
          `
          renderDom.append(tableHtml)
        }
      })
    </script>
  </body>
</html>
